<template>
    <div>
        <!--主题页面展示-->
         <div v-if="this.$store.state.container_shoeornot">
             <!--1-->
            <el-row class="nav_a_top">
                <el-col :span="12"><div class="grid-content bg-purple">餐柜列表</div></el-col>
                <el-col :span="12" @click.native="addcangui"><div class="grid-content bg-purple-light"><div class="nav_a_top_div">添加餐柜</div></div></el-col>
            </el-row>
            <!--2-->
            <form class="dingdan_form">
                <input type="text" placeholder="手机号">
                <select class="nav_sel">
                    <option value="">合作公司1</option>
                    <option value="">合作公司2</option>
                </select> 
                <select class="nav_sel">
                    <option value="">状态1</option>
                    <option value="">状态2</option>
                </select>
                <button class="dingdan_form_shaixuan">筛选</button>
            </form>
            <!--3-->
            <table class="nav_a_table fs12">
                    <tr>
                        <td>餐柜名称</td>
                        <td>合作公司</td>
                        <td>详细地址</td>
                        <td>添加时间</td>
                        <td>状态</td>
                        <td>管理人员</td>
                        <td>仓格数量</td>
                        <td>配餐厨房</td>
                        <td>归属货架</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td>海汇中心001</td>
                        <td>大管家物业有限公司</td>
                        <td>河南省郑州市金水区东风南路海汇中心6号楼1楼大厅西北角</td>
                        <td>2017-09-12 16：20</td>
                        <td>启用</td>
                        <td><select><option>&nbsp;小红&nbsp;</option><option>&nbsp;小兰&nbsp;</option></select></td>
                        <td @click="addcanggeclick"><button class="nav_a_button">添加仓格</button></td>
                        <td><select><option>&nbsp;美地聚吧&nbsp;</option><option>&nbsp;爱便利聚吧&nbsp;</option></select></td>
                        <td><select><option>归属货架</option><option>归属货架1</option></select></td>
                        <td><button class="nav_a_button">详情</button><button class="nav_a_button">禁用</button><button class="nav_a_button">修改</button><button class="nav_a_button">远程开柜</button></td>
                    </tr>
                </table>
         </div>
         <!--添加餐柜页面-->
         <div v-if="this.$store.state.add_cangui_showornot">
                <addcangui></addcangui>
         </div>
         <!--5添加仓格页面-->
         <div v-if="this.$store.state.add_cangge_showornot">
              <addcangge></addcangge>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
import addcangui from './cangui_addcangui.vue'
import addcangge from './cangui_addcangge.vue'
export default {
  name: 'cangui',
  data () {
    return {
    }
  },
  components:{
    addcangui,
    addcangge
  },
  methods:{
    // 筛选
    onSubmit:function(){
    },
    //   添加餐柜
    addcangui:function(){
        this.$store.state.container_shoeornot=false;
        this.$store.state.add_cangui_showornot=true;
        this.$store.state.add_cangge_showornot=false;
    },
    // 添加仓格的点击事件
    addcanggeclick:function(){
        this.$store.state.container_shoeornot=false;
        this.$store.state.add_cangui_showornot=false;
        this.$store.state.add_cangge_showornot=true;
    }
  },
  mounted() {
    
    },
}
</script>
<style scoped>
/*1*/
.nav_a_top{height: 40px;background-color: white;padding: 10px;}
.nav_a_top>div:nth-child(2){text-align: center;}
.nav_a_top_div{width: 100px;float: right;border: 1px solid #A9A9A9;}
/*2*/
.dingdan_form{margin: 25px 0px 45px 0px;}
.dingdan_form input{padding: 4px 0px 4px 7px;}
.nav_sel{padding: 4px 0px 4px 7px;box-sizing: border-box;width: 181px;margin-left: 10px;position:relative ;top:2px;}
.dingdan_form_shaixuan{background-color: white;border: 1px solid #bbb;width: 80px;height: 30px;display: inline-block;border-radius: 7px;margin-left: 10px;background-color: #bbb;}
/*3*/
.nav_a_table>tr:nth-child(1) td{padding: 15px 20px;background-color: #cdcdcd;border: 1px solid #bbbbbb;box-sizing: border-box;text-align: center}
.nav_a_table>tr:nth-child(2) td{padding: 15px 20px;background-color: white;border: 1px solid #bbbbbb;box-sizing: border-box;}
.nav_a_button{padding: 3px;box-sizing: border-box;margin-right:5px;}
.nav_a_table table{padding: 3px;}
</style>